<template>
  <div class="app" style="margin-top:3vh">
    <div v-if="isMobile">
      <el-row>
        <el-col :span="22" :push="1">
          <el-table :data="tableData" border style="width: 100%" max-height="250px">
            <el-table-column prop="createTime" label="日期" align="center">
              <template slot-scope="scope">{{scope.row.createTime.substring(0,10)}}</template>
            </el-table-column>
            <el-table-column prop="startTime" label="上班时间" align="center">
              <template
                slot-scope="scope"
              >{{scope.row.startTime?scope.row.startTime.substring(11,19):scope.row.startTime}}</template>
            </el-table-column>
            <el-table-column prop="endTime" label="下班时间" align="center">
              <template
                slot-scope="scope"
              >{{scope.row.endTime?scope.row.endTime.substring(11,19):scope.row.endTime}}</template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="flex">
          <el-button @click="insertStartTime">上班打卡</el-button>
          <el-button @click="updateEndTime">下班打卡</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <h1>请在手机端上访问</h1>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      tableData: []
    };
  },
  computed: {
    isMobile() {
      return document.body.clientWidth < 500;
    }
  },
  methods: {
    insertStartTime() {
      this.$axios
        .get("/insertStartTime", {
          params: {
            date: this.formatDateTime(new Date())
          }
        })
        .then(res => {
          if (res.data.code == "0") {
            this.$message({
              message: "上班打卡成功！",
              type: "success"
            });
            this.getList();
          } else {
            this.$message({
              message: "上班打卡失败，请检查问题！",
              type: "error"
            });
          }
        })
        .catch(err => {
          this.$message({
            message: `上班打卡失败 ${err}`,
            type: "error"
          });
        });
    },
    updateEndTime() {
      this.$axios
        .get("/updateEndTime", {
          params: {
            date: this.formatDateTime(new Date())
          }
        })
        .then(res => {
          if (res.data.code == "0") {
            this.$message({
              message: "下班班打卡成功！",
              type: "success"
            });
            this.getList();
          } else {
            this.$message({
              message: "下班打卡失败！请检查问题",
              type: "error"
            });
          }
        })
        .catch(err => {
          this.$message({
            message: `下班打卡失败 ${err}`,
            type: "error"
          });
        });
    },
    getList() {
      this.$axios
        .get("/selectGagaTimeDomain")
        .then(res => {
          if (res.data.code == "0") {
            this.tableData = res.data.result.reverse();
          } else {
            this.$message({
              message: "获取列表失败！",
              type: "error"
            });
          }
        })
        .catch(err => {
          this.$message({
            message: `获取列表失败 ${err}`,
            type: "error"
          });
        });
    },
    formatDateTime(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      let second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style>
.flex {
  margin-top: 10vh;
  display: flex;
  justify-content: space-around;
}
</style>
